<template>
  <el-drawer class="custom-drawer" direction="rtl" ref="customDrawer" v-model="isVisible" :size="props.width"
    :append-to-body="props.appendToBody" :close-on-press-escape="false" :close-on-click-modal="props.closeOnClickModal"
    :show-close="false" :before-close="handleClose">
    <template #header="{ close, titleId, titleClass }">
      <el-page-header @back="close">
        <template #content>
          <slot v-if="$slots.title" name="title"></slot>
          <template v-else>{{ title }}</template>
        </template>
        <template v-if="$slots.extra" #extra>
          <slot name="extra"></slot>
        </template>
      </el-page-header>
    </template>
    <el-scrollbar ref="scrollbar" v-loading="props.loading" element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.4)"
      style="width: 100%; height: 100%" wrapStyle="overflow-x: hidden;"
      viewStyle="background-color: #F1F1F1;padding: 20px;box-sizing: border-box;min-height: 100%;">
      <slot></slot>
    </el-scrollbar>
    <template v-if="$slots.footer" #footer>
      <slot name="footer"></slot>
    </template>
  </el-drawer>
</template>

<script setup name="customDrawer">
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  appendToBody: {
    type: Boolean,
    default: true
  },
  appendTo: {
    type: String,
    default: 'body'
  },
  width: {
    type: String,
    default: '60%'
  },
  title: {
    type: String,
    default: ''
  },
  closeOnClickModal: Boolean,
  loading: Boolean
})
const emit = defineEmits(['update:modelValue', 'close'])
const isVisible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
const handleClose = (e) => {
  if (typeof e === 'function') {
    emit('close', e)
  } else {
    isVisible.value = false
    emit('close')
  }
}
defineExpose({
  handleClose
})
</script>

<style lang='scss'>
.custom-drawer {
  .el-drawer {
    &__header {
      height: 60px;
      z-index: 1;
      box-shadow: 0 0 6px 0px rgba(0, 0, 0, 0.2);
      padding: 0 var(--el-drawer-padding-primary);
      margin-bottom: 0;
      user-select: none;
    }

    &__body {
      overflow: hidden;
      height: 1px;
      padding: 0;
    }

    &__footer {
      height: 60px;
      display: flex;
      align-items: center;
      z-index: 1;
      box-shadow: 0 0 6px 0px rgba(0, 0, 0, 0.2);
      padding: 0 var(--el-drawer-padding-primary);
    }
  }
}
</style>
